<template>
	<view>
		<view class="empty-box" v-if="list.length == 0">
			<image src="../../static/images/empty_icon.png" mode=""></image>
			<text>暂无{{examType == 1 ? '练习试题' : '测评考试'}}</text>
		</view>
		<view class="content">
			<nav-box :title="title"></nav-box>
			<view class="list-box" v-if="list.length > 0">
				<block v-for="item in list" :key="item.id">
					<view class="item u-flex u-row-between">
						<text>{{ item.title }}</text>
						<navigator :url="`../practiceDetail/practiceDetail?title=${item.title}&examType=${examType}`" hover-class="none" v-show="examType == 1">
							<!-- <image src="../../static/images/forward.png" mode="" v-show="examType == 1"></image> -->
							<text v-show="examType == 1" class="finish">开始练习</text>
						</navigator>
						<text v-show="examType == 2" :class="item.finish ? '' : 'finish'" @click="toExam(item.title, item.finish)">{{ item.finish ? '已完成' : '开始考试' }}</text>
					</view>
				</block>
			</view>
			<u-modal
				title=""
				cancel-color="#2979ff"
				v-model="modalConfig.show"
				:show-cancel-button="true"
				:show-confirm-button="modalConfig.showConfirmBtn"
				:confirm-text="modalConfig.confimText"
				:content="modalConfig.content"
				:cancel-text="modalConfig.cancelText"
				@confirm="beginExam"
				@cancel="cancelExam"
			></u-modal>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [{ id: 1, title: '0001练习试题' }, { id: 2, title: '0002练习试题' }, { id: 3, title: '0003练习试题' }, { id: 4, title: '0004练习试题' }],
			title: '',
			navTitle: '',
			examType: null, //考试类型 1模拟 2正式
			modalConfig: {
				show: false,
				confimText: '开始考试',
				content: '是否开始考试',
				showConfirmBtn: true,
				cancelText: '取消'
			},
			timer: null
		};
	},
	onLoad(options) {
		this.title = options.title;
		this.examType = options.examType;
		// 替换接口数据
		if (this.examType == 2) {
			this.list = [
				{
					id: 1,
					title: '2021年度理论测评',
					finish: false //是否完成
				},
				{
					id: 2,
					title: '2021年度理论测评',
					finish: true //是否完成
				},
				{
					id: 3,
					title: '2021年度理论测评',
					finish: false //是否完成
				}
			];
		}
	},
	methods: {
		toExam(navTitle, isFinish) {
			if (isFinish) {
				return;
			} else {
				this.modalConfig.show = true;
				this.navTitle = navTitle;
			}
		},
		// 开始考试
		beginExam() {
			let number = 5;
			this.modalConfig.show = true;
			this.modalConfig.showConfirmBtn = false;
			this.modalConfig.cancelText = '取消考试';
			this.timer = setInterval(() => {
				if (number < 1 && this.modalConfig.show) {
					this.cancelExam();
					uni.navigateTo({
						url: `../practiceDetail/practiceDetail?title=${this.navTitle}&examType=${this.examType}`
					});
					this.modalConfig.show = false;
				}
				this.modalConfig.content = `${number}秒后开始考试`;
				number--;
			}, 1000);
		},
		// 取消考试
		cancelExam() {
			this.modalConfig.show = false;
			clearInterval(this.timer);
			this.modalConfig.content = `是否开始考试`;
			this.modalConfig.showConfirmBtn = true;
			this.modalConfig.cancelText = '取消';
		}
	}
};
</script>

<style lang="scss" scoped>
.empty-box {
	padding-top: 140upx;
	text-align: center;
	image {
		width: 500upx;
		height: 500upx;
	}
	text {
		display: block;
		color: #949dae;
		font-size: 28upx;
	}
}
.content {
	font-size: 36upx;
	background: #ffffff;

	.list-box {
		.item {
			padding: 40upx 30upx 40upx 40upx;
			border: 2upx solid $color-efe;
			color: $color-595;
			image {
				width: 40upx;
				height: 40upx;
				padding-left: 30upx;
			}
			text {
				&:last-child {
					font-size: 24upx;
					color: #9f9f9f;
				}
			}
			.finish {
				background: linear-gradient(270deg, #59a7ff 0%, #2d6eff 100%);
				border-radius: 28upx;
				color: #ffffff !important;
				padding: 12upx 20upx;
			}
		}
	}
}
</style>
